<template>
  <div class="park-dialog">
    <el-dialog
        v-model="dialogVisible" 
        :width="width"
        v-bind="$attrs"
        @close="onClose"
        :close-on-click-modal="false"
      >
      <template #header>
       <div class="park-dialog-title"> {{title}}</div>
      </template>
      <slot></slot>
      <template #footer v-if="footer">
        <div class="dialog-footer">
          <el-button @click="cancel" :loading="loading">{{cancelText}}</el-button>
          <el-button type="primary" @click="confirm" :loading="loading"> {{confirmText}} </el-button>
        </div>
      </template>
    </el-dialog>
  </div> 
</template>
<script setup>
import { ref , defineProps, defineEmits} from 'vue'
const emits = defineEmits(['onClose', 'cancel', 'confirm'])
defineProps({
  title:{
    type:String,
    default: ''
  },
  footer:{
    type:Boolean,
    default: true
  },
  width: {
    type:String,
    default: '500'
  },
  cancelText:{
    type: String,
    default: '取消'
  },
  confirmText:{
    type: String,
    default: '确认'
  },
  loading: {
    type: Boolean,
    default: false
  }
})
const dialogVisible = ref(true)
const onClose = () => {
  console.log('-0-------')
  emits('onClose')
}

const cancel = () => {
  emits('onClose')
}
const confirm = () => {
  emits('confirm')
}
</script>
<style lang="scss">
.park-dialog{
  &-title{
    font-size:14px
  }
}
</style>